<template>
  <div>
    <nav class="main-nav">
      <ul class="nav-list">
        <li class="nav-item active">首页</li>
        <li class="nav-item">微课展示</li>
        <li class="nav-item">我的证书</li>
      </ul>
    </nav>

    <el-main class="content">
      <div class="common-layout">
        <el-main class="carousel-container">
          <el-carousel height="388px" style="width: 100%;">
            <el-carousel-item v-for="(item, index) in images" :key="index">
              <img :src="item" alt="Carousel Image" class="carousel-image" />
            </el-carousel-item>
          </el-carousel>
        </el-main>

        <el-aside class="aside">
          <ul class="aside-menu">
            <li class="menu-item" :class="{ active: activeMenu === 'subject' }" @click="setActiveMenu('subject')">学科课程</li>
            <li class="menu-item" :class="{ active: activeMenu === 'experiment' }" @click="setActiveMenu('experiment')">实验教学</li>
            <li class="menu-item" :class="{ active: activeMenu === 'special' }" @click="setActiveMenu('special')">特殊教育</li>
          </ul>
          <div class="content-panel">
            <div v-if="activeMenu === 'subject'">
              <div class="button-group">
                <button class="btn-upload" @click="handleUpload">我要传微课</button>
                <button class="btn-work">我的作品</button>
              </div>
              <div class="icon-links">
                <div class="icon-link" v-for="(icon, index) in iconList" :key="index">
                  <i :class="icon.class"></i>
                  <span>
                    <i :class="icon.smallIcon"></i> {{ icon.label }}
                  </span>
                </div>
              </div>
            </div>
            <div v-else-if="activeMenu === 'experiment'">
              <!-- 可以针对实验教学添加对应内容 -->
              <div class="button-group">
                <button class="btn-upload">我要传微课</button>
                <button class="btn-work">我的作品</button>
              </div>
              <div class="icon-links">
                <div class="icon-link" v-for="(icon, index) in iconList" :key="index">
                  <i :class="icon.class"></i>
                  <span>
                    <i :class="icon.smallIcon"></i> {{ icon.label }}
                  </span>
                </div>
              </div>
            </div>
            <div v-else-if="activeMenu === 'special'">
              <!-- 可以针对特殊教育添加对应内容 -->
              <div class="button-group">
                <button class="btn-upload">我要传微课</button>
                <button class="btn-work">我的作品</button>
              </div>
              <div class="icon-links">
                <div class="icon-link" v-for="(icon, index) in iconList" :key="index">
                  <i :class="icon.class"></i>
                  <span>
                    <i :class="icon.smallIcon"></i> {{ icon.label }}
                  </span>
                </div>
              </div>
            </div>
          </div>
        </el-aside>
      </div>
    </el-main>

    <!-- 微课展示 -->
    <div class="micro-course-container">
      <span class="micro-course-title">微课展示</span>
      <section class="video-list">
        <Card
            v-for="video in videos"
            :key="video.resourceId"
            :resourceId="video.resourceId"
            @click="playVideo(video.resourceId)"
        />
      </section>
    </div>
  </div>
  <!-- 新增权限对话框 -->
  <ResourceAdd :addDialogVisible="addDialogVisible" @closeDialog="addDialogVisible = false"
               @addSuccess="handleAddSuccess"></ResourceAdd>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { resourceApi } from '@/api/resourceApi'; // 引入资源 API
import Card from "@/components/CardTwo.vue"; // 导入 Card 组件
import ResourceAdd from '@/views/Resource/AddResource.vue';

// 引入图片
import img0 from '@/assets/images/course/teacher/carousel/img_0.png';
import img1 from '@/assets/images/course/teacher/carousel/img_1.png';
import img2 from '@/assets/images/course/teacher/carousel/img_2.png';
import NavBar from "@/components/NavBar.vue";
import AddAuthority from "@/views/resource/AddResource.vue";
import {useRouter} from "vue-router";
let addDialogVisible = ref(false)
const activeMenu = ref('subject'); // 默认显示学科课程内容

const setActiveMenu = (menu: string) => {
  activeMenu.value = menu; // 设置当前活动菜单
};

// 使用反应式数据
const images = ref([img0, img1, img2]);

// 初中的视频资源（示例数据）
const videos = ref([
  { resourceId: 118,  },
  { resourceId: 119,  },
  { resourceId: 119,  },
  { resourceId: 120,  },
  { resourceId: 121,  },
  { resourceId: 122,  },
  { resourceId: 123,  },
  { resourceId: 124,  },
  { resourceId: 125,  },


]);

// 图标列表
const iconList = [
  {
    class: 'icon-activity',
    smallClass: 'icon-small-activity',
    smallIcon: '@/assets/images/course/teacher/four/img_1.png',
    label: '活动报名'
  },
  {
    class: 'icon-guide',
    smallClass: 'icon-small-guide',
    smallIcon: '@/assets/images/course/teacher/four/login_bg.png',
    label: '工作指南'
  },
  {
    class: 'icon-review',
    smallClass: 'icon-small-review',
    smallIcon: '@/assets/images/course/teacher/four/img_3.png',
    label: '评审入口'
  },
  {
    class: 'icon-certificate',
    smallClass: 'icon-small-certificate',
    smallIcon: '@/assets/images/course/teacher/four/img_4.png',
    label: '证书查询'
  }
];

const playVideo = (id) => {
  console.log("播放视频 ID:", id);
  // 这里可以放入实际的播放逻辑，例如跳转到视频播放器等
  // this.$router.push({ name: 'videoPlayer', params: { resourceId: id } });
  const router = useRouter(); // 获取 router 实例
  router.push({ name: 'videoPlayer', params: { resourceId: id } }); // 使用 router 实例
};

const handleUpload = () => {
  addDialogVisible.value = true;
}
const handleAddSuccess = () => {
  console.log("资源添加成功");
  addDialogVisible.value = false;
  // 这里可以添加额外的逻辑，例如刷新数据等
};
</script>

<style scoped>
.site-header {
  background-color: #346af3;
  color: white;
  padding: 10px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo-container {
  display: flex;
  align-items: center;
}

.logo-img {
  height: 48px;
}

.platform-info {
  text-align: right;
}

.main-nav {
  background-color: #e9f1fd;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 20px;
}

.nav-list {
  list-style: none;
  display: flex;
  margin: 0;
}

.nav-item {
  padding: 10px 20px;
  cursor: pointer;
  color: #346af3;
}

.nav-item.active {
  border-bottom: 2px solid #346af3;
  font-weight: bold;
}

.user-info {
  background-color: #E9F1FD;
  display: flex;
  align-items: center;
  padding: 5px 20px;
}

.user-role {
  background-color: #28a745;
  color: #E9F1FD;
  padding: 5px;
  border-radius: 4px;
  margin-left: 400px;
}

.user-name {
  margin-left: 10px;
}

.content {
  background-color: #f8f9fa;
  padding: 20px;
  margin-left: 150px;
  margin-right: 150px;
  margin-top: 20px;
  text-align: center;
}

.common-layout {
  display: flex; /* 使用 Flexbox 布局 */
  width: 100%; /* 确保布局使用满宽度 */
}

.carousel-container {
  flex: 2; /* 占 2/3 的宽度 */
  display: flex; /* 使其成为 Flexbox 布局 */
  align-items: center; /* 垂直居中对齐 */
  justify-content: center; /* 水平居中对齐 */
  border-radius: 15px; /* 添加圆角 */
}

.carousel-image {
  width: 100%; /* 确保图片宽度充满容器 */
  height: auto; /* 自适应高度 */
  border-radius: 10px; /* 添加圆角 */
}

.el-aside {
  padding: 20px;
  background-color: #f5f5f5;
  border-radius: 10px; /* 添加圆角 */
}

.aside-menu {
  list-style: none;
  padding: 0;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-around;
}

.menu-item {
  padding: 10px 0;
  cursor: pointer;
  color: #333;
  text-align: center;
}

.menu-item.active {
  color: #00c8c8;
  font-weight: bold;
}

.button-group {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px;
}

.btn-upload, .btn-work {
  padding: 8px 15px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 20px;
  cursor: pointer;
}

.icon-links {
  display: flex;
  flex-wrap: wrap; /* 允许换行 */
  justify-content: space-between; /* 左右间隔均匀 */
}

.icon-link {
  flex: 0 0 45%; /* 每个图标链接占据容器的 45% 宽度 */
  margin-bottom: 20px; /* 每行图标之间的间隔 */
  border-radius: 10px;
  background-color: white;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.icon-link i {
  font-size: 30px;
  display: block;
  margin-bottom: 5px;
  color: #007bff;
}

.content-panel {
  padding: 20px;
  background-color: white;
  border: 1px solid #ddd;
  border-radius: 5px;
  margin-top: 20px;
}

.micro-course-container {
  text-align: center; /* 居中对齐 */
  margin: 48px 40px; /* 可选：设置上下边距 */
}

.micro-course-title {
  font-size: 30px; /* 根据需要的字体大小进行调整 */
  color: #000000; /* 根据设计需求设置颜色 */
}

.video-container {
  display: flex; /* 使用 Flexbox 布局 */
  flex-wrap: wrap; /* 允许换行 */
  justify-content: center; /* 水平居中 */
  margin-top: 20px; /* 上边距 */
}

.video-item {
  width: 300px; /* 每个视频项的宽度 */
  margin: 15px; /* 视频项之间的间隔 */
}

.video-card {
  border: 1px solid #ddd; /* 边框 */
  border-radius: 10px; /* 圆角 */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 阴影效果 */
  background-color: #fff; /* 背景色 */
  padding: 10px; /* 内边距 */
}

.subject {
  font-weight: bold; /* 加粗科目 */
  color: #346af3; /* 科目颜色 */
}

.video-title {
  font-size: 18px; /* 视频标题字体大小 */
  margin: 10px 0; /* 上下边距 */
}

.video-description,
.video-author {
  color: #666; /* 描述文本颜色 */
  font-size: 14px; /* 描述文本大小 */
}

.video-list {
  display: flex;
  flex-wrap: wrap; /* 允许卡片换行 */
  gap: 30px; /* 卡片之间的间距 */
  margin-top: 20px; /* 上方间距 */
  justify-content: center; /* 居中对齐 */
}
</style>
